@import "./flexs";
/* btn */
.rui-btn {
  --btn-h: 80px;
  --btn-w: 100%;
  --btn-c: #555555;
  --btn-bg: #fff;
  --btn-rad: 0px;
  --btn-bc: #555555;
  --btn-bw: 1px;
  --btn-fs: 30px;
  --btn-b: var(--btn-bw) solid var(--btn-bc);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--btn-h);
  width: var(--btn-w);
  border-radius: var(--btn-rad);
  color: var(--btn-c);
  font-size: var(--btn-fs);
  border: var(--btn-b);
  background: var(--btn-bg);
  user-select: none;
}
%sab {
  padding-bottom: calc(constant(safe-area-inset-bottom) / 2);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
.rui-safe-area-inset-bottom-btn {
  @extend %sab;
}
.rui-btn-none {
  --btn-b: none;
}
.rui-bg1 {
  --btn-bg: #f6ed8d;
}
.rui-bg2 {
  --btn-bg: #7de3c8;
}
.rui-bg3 {
  --btn-bg: linear-gradient(to left, #04e6fb, #9006fb);
}
.rui-circle-btn {
  --btn-rad: 40px;
}
.rui-mask {
  // mask: radial-gradient(
  //     circle at 100% 100%,
  //     transparent 0,
  //     transparent 12px,
  //     #2179f5 13px
  //   ),
  //   radial-gradient(
  //     circle at 0 0,
  //     transparent 0,
  //     transparent 12px,
  //     #2179f5 13px
  //   ),
  //   radial-gradient(
  //     circle at 100% 0,
  //     transparent 0,
  //     transparent 12px,
  //     #2179f5 13px
  //   ),
  //   radial-gradient(
  //     circle at 0 100%,
  //     transparent 0,
  //     transparent 12px,
  //     #2179f5 13px
  //   );
  // mask-repeat: no-repeat;
  // mask-position: right bottom, left top, right top, left bottom;
  // mask-size: 70% 70%;
}
